@font-face {
    font-family: 'dmsans-variablefont_opsz,wght';
    src: url('../fonts/dmsans-variablefont_opsz,wght.ttf') format('truetype');
}
.fa-home {
    color: #480066 !important;
}

.header_menu {
    background: url(/images/HomePage/Homepage_menubg.png) #ada2d3 no-repeat;
    background-size: contain;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    width: 100%; /* set width */
    height: auto; /* set height */
}
    .header_menu .mud-paper {
        align-content: center;
        text-align: center;
        background-color: transparent;
        font-family: 'dmsans-variablefont_opsz,wght';
    }


        .header_menu .mud-paper a, .header_menu .mud-paper button {
            font-family: 'dmsans-variablefont_opsz,wght';
            color: #fff !important;
            font-weight: 600;
            font-size: .8rem
        }

        .header_menu .mud-paper .mud-menu-activator {
            color: #fff !important;
            font-weight: 600;
        }
    .header_menu ._logo {
        background-image: url(../images/MAE_logo_white_long.png) !important;
        background-size: contain; /* scales image to cover the div */
        background-position: center 10px; /* centers the image */
        background-repeat: no-repeat; /* prevents tiling */
        width: 200px; /* set width */
        height: 100px; /* set height */
        justify-self: center;
    }


.Header_welcome {
    width: 100%;
    background: url(/images/HomePage/Homepage_bg.png) #ada2d3 no-repeat;
    background-size: contain;
    margin-top: 0px;
    width: 100%; /* set width */
    height: auto; /* set height */
    font-family: 'dmsans-variablefont_opsz,wght';
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    color: white;
}
.mud-main-content {
    padding-top: 0px
}

    .Header_welcome .txt {
        height: 67vh;
    }

.header_menu .hm_button {
    color: #fff!important;
    font-size:.95rem;
    font-weight: 500;
}
.HP_SkinCare {
    margin: 80px 0 0 0;
}
.Header-title {
    font-family: 'dmsans-variablefont_opsz,wght';
    font-weight: 400;
    display: flex;
    align-items: flex-end;
    padding-bottom: 20px;
}
    .Header-title name {
        font-size: 52px;
        line-height: 52px;
        color: #000;
        width: 55%;
        padding-left: 0px;
    }
    .Header-title p {
        font-size: 36px;
        line-height: 36px;
        color: #b4a9da;
        white-space: pre-line;
    }
.HP_SkinCare ._banner {
    position: absolute;
}

.HP_SkinCare .full-width {
    width: 100%;
    height: auto;
}

.HP_SkinCare .relative {
    position: relative;
    text-align: center;
}

.HP_SkinCare .centered-text {
    font-family: 'dmsans-variablefont_opsz,wght';
    font-weight: 300;
    white-space: pre-line;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 1.2rem;
    line-height: 1.4rem;
    width: 100%;
}
    .HP_SkinCare .centered-text h1 {
        font-size: 1.5rem;
        font-weight: 500;
    }
    .HP_SkinCare .centered-text.text_dark {
        color: #000 !important
    }

        .HP_SkinCare .centered-text.text_dark h1 {
            color: #000 !important
        }

    .HP_SkinCare .centered-text.text_shadow {

        font-weight: 900;
        text-shadow: -2px -2px 0 #c1bfca, 
            2px -2px 0 #c1bfca, 
            -2px 2px 0 #c1bfca, 
            2px 2px 0 #c1bfca, 
            -3px 0px 0 #c1bfca, 
            3px 0px 0 #c1bfca, 
            0px -3px 0 #c1bfca, 
            0px 3px 0 #c1bfca;
    }
    .HP_SkinCare .centered-text.text_shadow {

/*        -webkit-text-stroke: 1px #c1bfca;*/
    }
.productbanner{
    display: flex;
    gap: 15px;
    margin-top: 15px;
    margin-bottom: 10px;
}

    .product_headerbanner .mud-image, .productbanner .mud-image {
        border-radius: 10px;
    }
    .productbanner .product_img {
        text-align: center;
/*        background: #bab0cf;*/
        border-radius: 10px;
    }

    .productbanner .product_details {
        background: #dbdad6;
        border-radius: 10px;

    }
/* .productbanner .product_img .full-width {
        width: 50%;
        height: auto;
    }*/
.carousel-products {
    padding: 40px 30px 60px 60px;
    font-family: 'dmsans-variablefont_opsz,wght';
}
._info {
    height: -webkit-fill-available;
}
._star num {
    margin-bottom: 10px;
    margin-left: 20px;
    font-weight: 400;
}

    ._star span {
        font-size: 1rem;
        margin-right: 2px;
    }
.carousel-products ._name {
    font-size: 1.5rem;
    font-weight: 800;
}
.carousel-products ._title {
    font-size: 1.1rem;
    line-height: 1.2;
    padding-top: 2px;
    margin-bottom: 0px;
}
.carousel-products ._description {
    padding-top: 0px;
    font-size: .9rem;
    margin-bottom: 10px;
}
.carousel-products .imagess {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top;
    height: -webkit-fill-available;
}
.carousel-product-box .mud-icon-button-label {
    -moz-border-radius: inherit;
    -webkit-border-radius: inherit;
    border-radius: inherit;
    border: 1px #424242 solid;
    padding: 5px;
}

._shopnow-button {
    font-size: 16px;
    font-weight: 400;
    text-align: center;
    border-radius: 25px;
    width: 180px;
    border: 1px solid #808080;
    margin-top: 0px;
    padding: 6px 0;
}
.loginDialogBtn {
    background: #fff;
    border-radius: 25px;
    color: #000 !important;
    height: 40px;
    padding: 10px 15px;
}

    .loginDialogBtn .far {
        margin-right: 0px;
        font-size:.8rem
    }
.membershipBtn {
    background: #fff;
    border-radius:30px;
    color: #000 !important;
    padding: 2px 10px 2px 2px;
    font-size: .8rem;
    display: flex;
    align-items: center;
    text-transform:uppercase

}


.carousel-products .position-relative {
    position: relative
}

.carousel-products .position-absolute {
    position: absolute;
    bottom: 10px;
}

.carousel-products .position-absolute2 {
    position: absolute;
    top: 0;
    right: 0px;
}
@media (max-width: 1024px) {
    .header_menu .mud-paper a, .header_menu .mud-paper button {
        font-size: .7rem
    }

    .carousel-products {
        padding: 30px;
        font-family: 'dmsans-variablefont_opsz,wght';
    }
/*        .carousel-products .imagess {
            background-size: 90%;
        }*/
 
}
@media (max-width: 959px) {

 

    .Header_welcome {
        background: url(/images/HomePage/Homepage_bg_xs.png) #ada2d3 no-repeat;
        background-size: 160%;
        background-position: -260px -220px;
        margin-top:50px;
    }
        .Header_welcome .txt {
            height: 60vh;
        }
    .carousel-products ._description {
        font-size: .7rem;
        margin-bottom: 0px;
        min-height:0px;
    }
    .carousel-products ._name {
        font-size: .9rem;
 
    }
    .carousel-products ._title {
        font-size: .9rem;
    }
    ._shopnow-button {
        margin-bottom:20px;
    }

    .HP_SkinCare .centered-text{
        font-size: 1rem;
    }

}
@media (max-width: 768px) {
    .carousel-products {
        padding: 15px;
    }
    .carousel-products ._name {
        font-size: .8rem;
    }
    .carousel-products ._title {
        font-size: .7rem;
    }

    .carousel-products ._description {
        font-size: .7rem;
    }

        .carousel-products .mud-typography-h3 {
            font-size: 1rem;
        }

}

@media (max-width: 660px) {
    .HP_SkinCare .centered-text {
        font-size: .8rem;
        line-height: 1
    }
    .HP_SkinCare .centered-text h1{
        font-size: 1rem;

    }
    .carousel-products ._name {
        font-size: .7rem;

    }
    .carousel-products ._title {
        font-size: .65rem;
    }
    .carousel-products ._description {
        font-size: .65rem;
    }
    ._shopnow-button {
        font-size: .8rem;
        width: 140px;

    }


   

}
@media (max-width: 550px) {
   
    .carousel-products ._name {
        font-size: 1rem;
    }
    .carousel-products ._title {
        font-size: .6rem;
    }
    .carousel-products ._description {
        font-size: .6rem;
    }

    ._shopnow-button {
        font-size: .7rem;
        width: 100px;
        margin-bottom: 10px;
    }
}

@media (max-width: 480px) {


    .Header_welcome center {
        padding-bottom: 5vh;
    }

    .Header_welcome .txt {
        height: 25vh;
    }

    .Header_welcome {
        background: url(/images/HomePage/Homepage_bg_xs.png) #ada2d3 no-repeat;
        background-size: 220%;
        background-position: -300px -170px;
        margin-top: 50px;
    }

        .Header_welcome .mud-typography-h3 {
            font-size: 1.5rem;
        }

        .Header_welcome .mud-typography-h5 {
            font-size: 1rem;
        }

    .HP_SkinCare {
        margin: 20px 0 0 0;
    }

    .Header-title {
        padding-bottom: 10px;
    }

        .Header-title name {
            font-size: 1.5rem;
            line-height: 1;
            padding: 0
        }

        .Header-title p {
            font-size: 14px;
            line-height: 14px;
        }

    .HP_SkinCare .centered-text {
        font-size: .6rem;
        line-height: 1.2;
        width: 100%;
    }

        .HP_SkinCare .centered-text h1 {
            font-size: .8rem;
            line-height: 1;
        }

    .productbanner {
        gap: 8px;
        margin-top: 0px;
    }

    .product_headerbanner .mud-image {
        border-radius: 10px;
    }

    .productbanner .product_details {
        background: #dbdad6;
        border-radius: 10px;
    }

    .productbanner .product_img .mud-image {
        border-radius: 10px;
    }


    ._info {
        margin: 0;
        padding: 0 0px;
    }

    .HP_SkinCare .centered-text.text_shadow {
        font-size: .65rem;
        font-weight: bolder;
        line-height: 1;
        text-shadow: 1px 1px 1px #50505050;
    }
    .HP_SkinCare .centered-text.text_shadow h1 {
        font-size: 1rem;
        font-weight: bolder;
        line-height: 1;
        text-shadow: 1px 1px 1px #50505050;
    }
    ._shopnow-button {
        font-size: .6rem;
        width: 80px;
        margin-bottom: 0px;
    }
    .carousel-products .imagess {
        background-size: 80%;
        background-position: center -10px;
    }

    .carousel-products .position-absolute {
        bottom: 5px;
    }
        .carousel-products .position-absolute ._info {
            gap:2px !important
        }
    .carousel-products {
        padding: 10px 5px 0px 10px;
    }
    .carousel-products .imagess {
        background-position: center -10px;
        background-size:70%;
    }

    

    .carousel-products ._star svg {
        font-size: small;
        margin-right: -2px;
    }

    .carousel-product-box .hidden-xs {
        display: none
    }

    .carousel-products
    .mud-typography-h3 {
        font-size: .5rem;
        padding-right:8px;
    }

    .carousel-products ._name {
        font-size: .7rem;
    }

    .carousel-products ._title {
        font-size: .5rem;
    }

    .carousel-products ._description {
        font-size: .5rem;
    }
    .carousel-product-box .mud-icon-button {
        padding: 8px !important
    }
    .carousel-product-box .mud-icon-size-medium {
        font-size: .4rem;
    }

    ._shopnow-button {
        font-size: .5rem;
        padding: 8px 0;
        width: 100px;
        margin-bottom: 0px;
        margin-top: 8px;
    }
    .mud-typography-h4 {
        font-size: 1rem;
    }
}
@media (max-width: 375px) {
    .carousel-products {
        padding: 5px;
    }
        .carousel-products ._name{
            font-size: .6rem;
        }
        .carousel-products ._title, .carousel-products ._description {
            font-size: .5rem;
            margin-top:0px;
        }


    .mud-typography-h4 {
        font-size: .8rem;
    }

    .Header_welcome .mud-typography-h3 {
        font-size: 1.2rem;
    }
    .Header_welcome .mud-typography-h5 {
        font-size: 1rem;
    }
}